<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 43 42"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><g clip-path="url(#1118f2__a)"><g clip-path="url(#1118f2__b)"><path data-follow-fill="currentColor" d="M32.545 18.75h1.634c.433 0 .849.169 1.155.47.306.3.478.709.478 1.134v16.042c0 .425-.172.833-.478 1.134-.306.3-.722.47-1.155.47H8.037a1.65 1.65 0 0 1-1.156-.47 1.59 1.59 0 0 1-.478-1.134V20.354c0-.425.172-.833.478-1.134a1.65 1.65 0 0 1 1.156-.47H9.67v-1.604c0-1.475.295-2.935.87-4.297a11.217 11.217 0 0 1 2.48-3.643 11.453 11.453 0 0 1 3.71-2.435 11.622 11.622 0 0 1 8.753 0 11.453 11.453 0 0 1 3.71 2.435 11.217 11.217 0 0 1 2.48 3.643c.575 1.362.87 2.822.87 4.297v1.604Zm-3.268 0v-1.604c0-2.128-.86-4.168-2.393-5.672a8.247 8.247 0 0 0-5.776-2.349 8.247 8.247 0 0 0-5.777 2.35 7.948 7.948 0 0 0-2.393 5.67v1.605h16.339Zm-9.803 6.417v6.416h3.267v-6.416h-3.267Z" :fill="_fill"/></g></g><defs><clipPath id="1118f2__a"><path d="M0 0h35v35H0z" fill="#fff" transform="translate(3.486 3)"/></clipPath><clipPath id="1118f2__b"><path d="M0 0h32.083v32.083H0z" fill="#fff" transform="translate(6.403 5.917)"/></clipPath></defs></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconSocialSecurity extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
